<template>
	<view v-if="userData">
		<view class="from" v-if="userData">
			<view class="from-item">
				<text class="area">{{userData.countryNo}}</text>
				<input type="number" disabled :placeholder="userData.mobile" placeholder-class="phl" />
			</view>
			<view class="from-item">
				<input type="number" style="width: 350rpx;" v-model="userPhone.code" placeholder="请输入验证码"
					placeholder-class="phl" />
				<text class="code" @click="getCode">{{codeMessage}}</text>
			</view>
		
			
		
			
		
		</view>
		<input type="text" :disabled="trc20 ?true:false" v-model="userPhone.trc20Address" placeholder="请输入TRX链USDT地址" placeholder-class="phl" class="inp">
		<!-- <text class="title">只可用此Token地址充值或提现USDT绑定后不可修改.</text> -->
		<button class="btn"  v-if="!trc20" @click="submit">确定</button>
		<uni-pay ref="pay"  @bindPassWord="confirm"></uni-pay>
	</view>
</template>

<script setup>
	import {
		user,
		setTrc20Address,
		smsCode
	} from '@/util/api.js'
	import {
		ref
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app'
	onShow(()=>{
		getUser()
	})
	const userPhone = ref({
		code:"",
		password:"",
		trc20Address:""
	})
	const pay = ref()
	const trc20State = ref()
	// 获取短信
	const codeMessage = ref("获取验证码")
	let bok = true
	let num = 60
	const getCode = async ()=>{
		
		if(!bok) return false;
		bok = false
		uni.showLoading({
			mask:true
		})
		const result = await smsCode({countryNo:userData.value.countryNo,mobile:userData.value.mobile})
		uni.hideLoading()
		if(result.code!=200){
			bok = true
			codeMessage.value = "获取验证码"
			return false
		}
		let timer = setInterval(()=>{
			num--
			codeMessage.value = `${num}秒后重试`
			if(num<=0){
				bok = true
				codeMessage.value = "获取验证码"
				clearInterval(timer)
			}
		},1000)
	}
	const trc20 = ref()
	const password = ref()
	const userData = ref()
	// 获取当前登录用户信息
	const getUser = async () => {
		const result = await user()
		console.log(result)
		if (result.code == 200) {
			trc20.value = result.data.trc20Address
			
			userData.value = result.data
		} else {
			userData.value = null
		}
	}
	const submit = async() =>{
		if(!userPhone.value.trc20Address){
			uni.showModal({
				title:"提示",
				content:"请输入提币地址",
				showCancel:false
			})
			return false;
		}
		if(!userPhone.value.code){
			uni.showModal({
				title:"提示",
				content:"请输入验证码",
				showCancel:false
			})
			return false;
		}
		pay.value.show()
		
	}
	const confirm = async(e)=>{
		userPhone.value.password = e
		uni.showLoading({
			mask:true
		})
		const result = await setTrc20Address(userPhone.value)
		uni.hideLoading()
		if(result.code==200){
			uni.showModal({
				title:"提示",
				content:"修改成功",
				showCancel:false,
				success: () => {
					uni.navigateBack()
				}
			})
		}
	}
</script>

<style lang="scss">
	.from {
		margin-top: 38rpx;
		padding: 0 38rpx;
	
		.from-item {
			width: 519rpx;
			height: 100rpx;
			background: #F6F6FF;
			border-radius: 71rpx;
			margin-bottom: 38rpx;
			display: flex;
			align-items: center;
			padding: 0 77rpx;
	
			.phl {
				color: #999;
				font-size: 28rpx;
			}
	
			.area {
				display: block;
				margin-right: 38rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
			}
	
			.code {
				font-weight: bold;
				display: block;
	
				color: #333333;
				font-size: 28rpx;
			}
		}
	
		.submit {
			width: 673rpx;
			height: 100rpx;
			background: #0265FF;
			box-shadow: 0px 12rpx 23rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 71rpx;
			margin: 77rpx auto 38rpx;
			border: none;
			color: #fff;
			font-weight: 800;
			font-size: 38rpx;
			line-height: 100rpx;
		}
	
	}
	
	.btn{
		width: 673rpx;
		height: 100rpx;
		background: #0265FF;
		box-shadow: 0px 12rpx 23rpx 2rpx rgba(0,0,0,0.16);
		border-radius: 71rpx ;
		margin: 0 auto 38rpx;
		border: none;
		color: #fff;
		font-weight: 800;
		font-size: 38rpx;
		line-height: 100rpx;
	}
	.title{
		display: block;
		margin: 50rpx 0 77rpx 38rpx;
		color: #999;
		font-size: 27rpx;
	}
	.inp{
		width: 519rpx;
		height: 100rpx;
		background: #F6F6FF;
		border-radius: 71rpx;
		display: block;
		margin: 38rpx;
		padding: 0 77rpx;
	}
	.phl{
		color: #999;
		font-size: 28rpx;
	}
page {
		// background: #F6F7F9;
	}
</style>
